import { useRef, useState } from "react";
import BlogItem from "./BlogItem";

function Blog() {
    const selectedIndex = useRef(-1);
    const [blogList, setBlogList] = useState([]);
    const [inputText, setInputText] = useState("");

    const createBlog = (title, author, checked) => {
        return {
            title: title,
            author: author,
            date: new Date().toUTCString(),
            checked: checked
        };
    }

    const sendChecked = (value, index) => {
        selectedIndex.current = -1;
        blogList[index].checked = value;
        setBlogList([
            ...blogList
        ])
    }

    const addBlog = () => {
        if (inputText.trim().length > 0) {
            selectedIndex.current = -1;
            let blog = createBlog(inputText, "me", false);
            blogList.push(blog);
            setBlogList([
                ...blogList
            ]);
            setInputText("");
        }
    }

    const selectBlog = () => {
        let num = 0;
        let index = -1;
        for (let i = 0; i < blogList.length; i++) {
            if (blogList[i].checked) {
                num++;
                index = i;
            }
        }
        if (num > 1) {
            alert("only can select one blog");
            return;
        } else if (num <= 0) {
            alert("please select one blog.");
            return;
        } else {
            selectedIndex.current = index;
            setInputText(blogList[selectedIndex.current].title);
        }
    }

    const editBlog = () => {
        if (selectedIndex.current !== -1) {
            blogList[selectedIndex.current].title = inputText;
            blogList[selectedIndex.current].checked = false;
            setBlogList([
                ...blogList
            ]);
            setInputText("");
        }
    }

    const deleteBlog = () => {
        selectedIndex.current = -1;
        for (let i = blogList.length - 1; i >= 0; i--) {
            if (blogList[i].checked) {
                blogList.splice(i, 1);
            }
        }
        setBlogList([
            ...blogList
        ]);
    }

    return(
        <div>
            <ul>
                {blogList.map((item, index) => 
                    <BlogItem 
                        key={index}
                        index={index}
                        title={item.title}
                        author={item.author}
                        date={item.date}
                        checked={item.checked}
                        sendChecked={sendChecked}
                    />
                )}
            </ul>
            <input type="text" value={inputText} onChange={(event) => { setInputText(event.target.value) }}  />
            <button onClick={addBlog}>add</button>
            <button onClick={selectBlog}>select</button>
            <button onClick={editBlog}>edit</button>
            <button onClick={deleteBlog}>delete</button>
        </div>
    )
}

export default Blog;
/**
 * 有状态组件
 * 数据不可变原则：组件中的状态值不能修改，只能覆盖。
 */